<template>
  <div>
    <div class="box">
      <!-- 打卡名称 -->
      <div class="flex_y_center">
        <div>
          <span>*</span>
          类型名称：
        </div>
        <div>{{ goodsTypeName }}</div>
      </div>
      <!-- 模板名称 -->
      <div class="flex_y_center">
        <div>
          <span>*</span>
          模板名称：
        </div>
        <el-input
          v-model="extendForm.extend_name"
          placeholder="请输入模板名称"
          style="width: 30%"
        />
      </div>
      <!-- 模板项 -->
      <div>
        <div>
          <span>*</span>
          模板项：
          <el-button type="primary" @click="push">添加模板项</el-button>
        </div>
        <el-table :data="extendForm.extend_fields" style="margin-top: 10px">
          <el-table-column label="名称">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入名称" />
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.type"
                placeholder="请选择类型"
                @change="selType(scope.row)"
              >
                <el-option
                  v-for="(item, index) of type"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="默认值">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.default"
                placeholder="请输入默认值"
              />
            </template>
          </el-table-column>
          <el-table-column label="值">
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.type != 'input_select'"
                disabled
                placeholder="请输入值"
              />
              <!-- 下拉框选项 -->
              <div v-else-if="scope.row.type == 'input_select'">
                <div
                  v-for="(item, index) in scope.row.option"
                  :key="index"
                  class="flex_y_center"
                >
                  <el-input
                    v-model="scope.row.option[index]"
                    style="margin: 0 5px 5px 0"
                  />
                  <el-button
                    type="text"
                    @click="scope.row.option.splice(index, 1)"
                  >
                    移除
                  </el-button>
                </div>
                <el-button @click="scope.row.option.push('')">New</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单位">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit" placeholder="请输入单位" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="extendForm.extend_fields.splice(scope.$index, 1)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="flex_between">
      <div></div>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { addGoodsExtend } from '@/api/extend'
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        extendForm: {
          extend_name: '',
          extend_fields: [],
        },
        selBool: false,
        type: [
          {
            name: '文字输入',
            id: 'input_str_w',
          },
          {
            name: '下拉菜单',
            id: 'input_select',
          },
        ],
      }
    },
    computed: {
      ...mapState({
        goodsTypeId: (state) => state.goods.goodsTypeId,
        goodsTypeName: (state) => state.goods.goodsTypeName,
      }),
    },
    mounted() {
      this.push()
    },
    methods: {
      // 给menuItem变量添加数据
      push() {
        this.extendForm.extend_fields.push({
          name: '',
          type: '',
          default: '',
          unit: '',
        })
      },
      // 选择拓展字段类型
      selType(row) {
        switch (row.type) {
          case 'input_str_w':
            if (row.option) this.$delete(row, 'option')
            break
          case 'input_select':
            this.$set(row, 'option', [''])
            break
        }
      },
      submit() {
        const data = {
          type_id: this.goodsTypeId,
          ...this.extendForm,
        }
        if (typeof data.extend_fields != 'string')
          data.extend_fields = JSON.stringify(data.extend_fields)
        addGoodsExtend(data).then(() => {
          this.$emit('send')
        })
      },
      // 打印
      console() {
        console.log(this.extendForm.extend_fields)
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }

  .box > div {
    margin-bottom: 10px;
  }
</style>
